<template>
  <el-dialog
    title="项目详情"
    :visible.sync="dialogVisible"
    width="70%"
    append-to-body
    custom-class="search-result-pop"
    :before-close="handleClose"
  >
    <div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="项目详情" name="1">
          <ProDetail ref="proDetail" :is-hide-btns="false" />
        </el-tab-pane>
        <el-tab-pane label="项目记录" name="2">
          <ProRecord v-if="activeName === '2'" :id="id" ref="proRecord" :title="title" />
        </el-tab-pane>
        <el-tab-pane label="项目反馈" name="3">
          <ProFeeBack v-if="activeName === '3'" :id="id" ref="proFeeBack" />
        </el-tab-pane>
      </el-tabs>
    </div>
    <span v-if="activeName !== '1'" class="dialog-footer">
      <el-button @click="handleClose()">取 消</el-button>
      <el-button type="primary" @click="handleClose()">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { create, getNewsStudyInfo, updateNewsStudyInfo } from '@/api/content-manage/researchResult.js'
import { getProDetail } from './../api'
import { TYPE, addPopFormConfig } from '../initData'
import FormGroup from '@/views/components/FormGroup'
import PdfUpload from '@/components/PdfUpload'
import ProFeeBack from './proFeekBack.vue'
import ProRecord from './proRecord.vue'
import ProDetail from './proDetail.vue'
export default {
  name: 'AddPop',
  components: {
    FormGroup,
    PdfUpload,
    ProFeeBack,
    ProRecord,
    ProDetail
  },
  data() {
    return {
      dialogVisible: false,
      addPopFormConfig: JSON.parse(JSON.stringify(addPopFormConfig)),
      src: '',
      popType: '',
      detail: '',
      columnList: [],
      id: '',
      comTypeOptions: [
        {
          label: '类型1',
          value: '1'
        },
        {
          label: '类型2',
          value: '2'
        }
      ],
      comManageVal: '',
      time1: '',
      time2: '',
      time3: '',
      time4: '',
      rules1: '',
      comMetariall: '',
      filesVal: '',
      activeName: '1',
      title: ''
    }
  },
  mounted() {

  },
  methods: {
    async getProDetail(id) {
      const { code, data } = await getProDetail(id)
      const newConfig = JSON.parse(JSON.stringify(addPopFormConfig))
      if (code === 0) {
        const keys = Object.keys(data)
        keys.forEach((v) => {
          newConfig.forEach(ele => {
            if (ele.keyIndex === v) {
              ele.value = data[v]
            }
            if (ele.keyIndex === 'typeId') {
              ele.options = this.columnList
            }
          })
        })
        this.detail = data.detail
        this.addPopFormConfig = newConfig
      }
    },
    handleClick() {

    },
    open({ popType, id, columnList, title }) {
      this.title = title
      this.id = id
      this.popType = popType
      this.dialogVisible = true
      this.columnList = columnList

      this.$nextTick(() => {
        this.$refs.proDetail && this.$refs.proDetail.open({ popType: 'view', id, columnList: this.columnList })
        // this.getProDetail(id);
      })

      // if (popType === 'edit') {
      //   this.getNewsStudyInfo(id)
      // } else {
      //   const newConfig = JSON.parse(JSON.stringify(addPopFormConfig))
      //   newConfig.forEach(ele => {
      //     if (ele.keyIndex === 'typeId') {
      //       ele.options = this.columnList
      //     }
      //   })
      //   this.addPopFormConfig = newConfig
      //   this.detail = ''
      // }
      // this.$nextTick(() => {
      //   this.$refs.formParams1 && this.$refs.formParams1.resetFields()
      // })
    },
    handleClose() {
      this.addPopFormConfig = JSON.parse(JSON.stringify(addPopFormConfig))
      this.detail = ''
      this.activeName = '1'
      this.dialogVisible = false
    },

    //   选择参赛类型
    handleChooseComType(value) {
      console.log(value, '----选择参赛类型')
    },

    async handleConfirm() {
      const fromParams1 = this.$refs.formParams1 && await this.$refs.formParams1.getParams()
      const fromParams2 = this.$refs.formParams2 && await this.$refs.formParams2.getParams()
      const detail = this.$refs.editor && this.$refs.editor.getValue()
      if (!detail || detail === '<p><br></p>') {
        this.$message.warning('请编辑文章内容')
        return
      }
      const params = {
        ...fromParams1,
        ...fromParams2,
        detail,
        type: TYPE
      }
      this.src = fromParams2.pdfUrl

      this[this.popType](params)
    },
    async add(fromParams) {
      const params = {
        ...fromParams,
        type: TYPE

      }
      const { code, msg } = await create(params)
      if (code !== 0) {
        this.$message.error(msg)
        return
      }
      this.handleClose()
      this.dialogVisible = false
      this.$emit('addSuccess')
    },
    async edit(fromParams) {
      const params = {
        ...fromParams,
        type: TYPE,
        id: this.id
      }
      const { code, msg } = await updateNewsStudyInfo(params)
      if (code !== 0) {
        this.$message.error(msg)
        return
      }
      this.handleClose()
      this.dialogVisible = false
      this.$emit('addSuccess')
    }
  }
}
</script>

<style lang='scss'>
    .search-result-pop {
        .el-drawer__body {
            padding: 15px 20px;
        }
        .basic-infos {

            .title {
                padding: 3px 10px;
                border-left: 2px solid rgb(20, 165, 232);
                margin-bottom: 20px;
            }
        }
        .dialog-footer {
            display: inline-block;
            width: 100%;
            text-align: right;
        }
    }
</style>

<style lang="scss" scoped>

  .mb-10 {
      margin-bottom: 10px;
  }
  .mr-10 {
      margin-right: 10px;
  }
  .choose-time-row {
      display: flex;
      justify-content: flex-start;
      margin-bottom: 10px;
  }

  .audit-row {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
  }
</style>
